<template>
  <div>计算属性</div>

  <ul>
    <li>firstName:{{ person.firstName }}</li>
    <li>lastName:{{ person.lastName }}</li>
    <li>FullName:{{ fullName }}</li>
  </ul>

  <button @click="ChangeName">ChangeName</button>
  <button @click="ChangeFullName">改变计算属性的值</button>
</template>

<script setup lang="ts">
import { computed, reactive } from "vue";
//计算属性是有缓存的。

let person = reactive({
  firstName: "Jock",
  lastName: "Fang",
});
//--=======================================

function ChangeName() {
  person.lastName += "~";
}

//这样订单的计算属性，是只可读， 不可以改的
// let fullName = computed(() => {
//   return person.firstName + "_" + person.lastName;
// });

let fullName = computed({
  get() {
    return person.firstName + "," + person.lastName;
  },
  set(value) {
    const [str1, str2] = value.split(",");
    // fullName.value = value;
    person.firstName = str1;
    person.lastName = str2;
  },
});

function ChangeFullName() {
  fullName.value = "fang, weixue";
}
</script>

<style scoped>
button {
  margin: 0 10px;
}
</style>